<template>
    <el-row class="mt-2 border-radios-5 bg-white font-size-20 pl-2 "  >
        <div v-for="dev in devlist" :key="dev.id" :item="dev"  >
            <el-col :span="24" class="pt-4 pb-4 border-bottom">
                <div class="grid-content bg-purple-light ">
                    <el-col :span="16" class="pl-2">
                        <div>{{dev.control_shortname}}</div>
                    </el-col>
                    <el-col :span="4" align="right">
                        <el-switch
                                @change="change_dev_status(dev)"
                                v-model="dev.is_open"
                                active-text=""
                                inactive-text=""
                                active-value="1"
                                inactive-value="0">
                        </el-switch>
                    </el-col>
                    <el-col :span="4" align="right" class="pr-1">
                        <el-container>
                            <el-main>
                                <el-avatar :size="25" :src="dev.open_imgUrl" class="va-m " v-if="dev.is_open == 1"></el-avatar>
                                <el-avatar :size="25" :src="dev.close_imgUrl" class="va-m " v-else></el-avatar>
                            </el-main>
                        </el-container>
                    </el-col>
                </div>
            </el-col>
        </div>
    </el-row>

</template>

<script>
    export default {
        name: "ControlItem",
        props:{
            devlist:{
                'type':Array,
            }
        },
        methods:{
            change_dev_status(dev){
                var message = { "uid": "1", "gateway_id": dev.gateway_id, "data": { "dev_id": dev.control_id, "data": dev.is_open } };
                this.wsock.$ws.send(JSON.stringify(message));
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    .va-m {
        vertical-align: middle;
    }
    .el-main {
        padding: 0 !important;
    }
    .scroll span{
        letter-spacing: 5px
    }
    .el-avatar{
        background-color: white;
    }
</style>